<!--
 * @Description: 所有订单
 * @Author: zzj
 * @Date: 2021-10-29 10:07:50
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-29 15:20:44
-->
<template>
	<div class="first">
		 <el-table :data="orderData.list" stripe style="width: 100%" class="order_list">
			<el-table-column prop="id" label="订单编号"></el-table-column>
			<el-table-column prop="orderTime" label="下单时间"></el-table-column>
			<el-table-column prop="total" label="订单总价">
				<template slot-scope="scope">
					￥ <span style="color:rgb(243, 16, 16); font-size:16px;font-weight:bolder;">{{scope.row.total}}</span> 元
				</template>
			</el-table-column>
			<el-table-column prop="status" label="订单状态" >
				<template slot-scope="scope">
					 <el-tag v-if="scope.row.status==='已发货'">{{scope.row.status}}</el-tag> 
					 <el-tag type="warning" v-if="scope.row.status==='已支付'">{{scope.row.status}}</el-tag> 
					 <el-tag type="info" v-if="scope.row.status==='已完成'">{{scope.row.status}}</el-tag> 
					 <el-tag type="success" v-if="scope.row.status==='待支付'">{{scope.row.status}}</el-tag> 
				</template>
			</el-table-column>
			<el-table-column prop="customerId" label="顾客id"></el-table-column>
			<el-table-column prop="id" label="操作">
				<template slot-scope="scope">
					<el-button type="text" @click="toDetailsHandler(scope.row.id)">详情</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<div class="pages">
			<el-pagination
			small
			background
			layout="total, sizes, prev, pager, next, jumper"
			@current-change="pageChangeHandler"
      :page-sizes="[5, 10, 20, 50, 100]"
			:page-size="orderData.pageSize"
			:current-page="orderData.page"
			:total="orderData.total">
		</el-pagination>
		</div>
		<!-- 分页结束 -->
	</div>
</template>

<script>
import {get} from "@/utils/request";
export default {
	data () {
		return {
			orderData:{},
			params:{
				page:1,
				pageSize:4
			},
		}
	},
	mounted(){
		this.loadOrdersHandler();
	},
	methods:{
		// 分页变动处理
		pageChangeHandler(page){
			this.params.page = page;
			this.loadOrdersHandler();
		},
		// 加载订单数据
		loadOrdersHandler(){
			let url = "/order/pageQuery"
			get(url,this.params).then(resp =>{
				this.orderData = resp.data;
			})
		},
		// 跳转至订单详情页
		toDetailsHandler(id){
			this.$router.push({
				path:"/order/Details",
				query:{id},
			})
		},
	}
}
</script>

<style lang="scss" scoped>
	.first {
		.pages {
			padding: 1em;
			text-align: end;
		}
	}
</style>